<!--
程序名：数据分析页面
-->
<template>
	<div class="Count" v-loading="loading">

		<div v-if="!(detail.length == 0)" class="opera-buttons">

			<div style="font-size: 400%; color: #409EFF;">{{peopleNum}}</div>
			<div style="color: #909399;">已填写人数</div>
			<el-button @click="Ranking()" type="text" size="medium">排名</el-button>
			<el-button @click="peopleFilled()" type="text" size="medium">已填写</el-button>
			<el-button @click="peopleNofill()" type="text" size="medium">未填写</el-button>


		</div>


		<br />
		<div v-if="detail.length == 0">暂时没有数据</div>
		<el-card class="question" v-for="(item, index) in detail">
			<div slot="header" class="clearfix">
				<span>{{ index + 1 + ". " + item.content }}</span>
				<span style="color: red;">
					<span v-if="item.questionType=='radio'">(单选题 </span>
					<span v-if="item.questionType=='checkbox'">(多选题 </span>
					<span v-if="item.questionType=='judge'">(判断题 </span>
					<span v-if="item.questionType=='text'">(填空题 </span>
					<span v-if="item.questionType=='texts'">(简答题 </span>
					<span>{{item.score+"分)"}}</span>
				</span>
			</div>
			<!--如果数据库中的问题类型为单项选择或者多项选择-->
			<!--则将数据库中的数据以表格、、饼状图、的方式进行展示-->
			<div
				v-if="item.questionType == 'radio' || item.questionType == 'checkbox' || item.questionType == 'judge' ">
				<el-table size="small" :data="item.choiceList" style="width: 100%" class="el-table"
					:row-class-name="tableRowClassName">

					<el-table-column prop="content" label="选项"></el-table-column>
					<el-table-column prop="count" label="数量" width="180"></el-table-column>
					<el-table-column prop="percent" label="占比" width="180"></el-table-column>
					<el-table-column fixed="right" label="操作" width="180">
						<template slot-scope="scope">
							<el-button @click="watch(item.questionId,scope.row.id,item.questionType,scope.row.content)"
								type="text" size="medium">查看</el-button>
						</template>
					</el-table-column>

				</el-table>
				<br />

				<el-button size="mini" type="primary" plain @click.native="changeValue(index, 1,0)">饼状图</el-button>

				<el-button size="mini" type="primary" plain @click.native="changeValue(index, 2,0)">柱状图</el-button>

				<!--点击后对应index变为0，所有图标不显示-->
				<el-button size="mini" type="primary" plain @click.native="changeValue(index, 0,0)">隐藏图表</el-button>

				<!--饼状图显示区域，点击饼状图后状态为1才显示-->
				<div :id="'bing' + index" class="bing" v-show="visible[index] == 1"></div>

				<!--柱状图显示区域，点击饼状图后状态为2才显示-->
				<div :id="'graph' + index" class="graph" v-show="visible[index] == 2"></div>

			</div>


			<!--如果数据库中的问题类型为text类型则将数据以弹窗表格的形式进行显示-->
			<div v-if="item.questionType == 'text' || item.questionType == 'texts'">
				<!--点击后对应index变为0，所有图标不显示-->

				<el-button size="mini" type="primary" plain @click.native="changeValue(index, 3,item.questionId)">词云图
				</el-button>

				<!-- <el-button size="mini" type="primary" plain @click.native="lookWorldCloud(item.questionId)">词云图</el-button> -->

				<el-button size="mini" type="primary" plain
					@click.native="lookTextDetail(item.questionId,item.questionType,item.rowNum)">详细内容</el-button>
				<el-button size="mini" type="primary" plain @click.native="changeValue(index, 0)">隐藏图表</el-button>
				<!--柱状图显示区域，点击饼状图后状态为2才显示-->
				<div :id="'mywordcloud' + index" class="mywordcloud" v-show="visible[index] == 3"></div>
			</div>
		</el-card>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<!--    单选的查看人员信息弹框-->
		<el-dialog title="查看人员" :visible.sync="selectVisible" width=30%>
			<div style="color: #409EFF;">共{{this.listdata.length}}人填写</div><br><br>
			<div>
				<el-row :gutter="20">
					<el-col :span="6" v-for="item in this.listdata">
						<div>{{item}}</div>
					</el-col>
				</el-row>
			</div>

		</el-dialog>

		<!--排名弹窗-->
		<el-dialog title="详细内容" :visible.sync="rankingVisible">

			<el-table :data="ranking" height="250" border style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="realName" label="提交人"></el-table-column>
				<el-table-column prop="systemScore" label="客观题得分"></el-table-column>
				<el-table-column prop="teacherScore" label="主观题得分"></el-table-column>
				<el-table-column prop="finalScore" label="总分"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="see(scope.row.id)" type="text" >查看</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>



		<!--简答题的详细信息弹窗-->
		<el-dialog title="详细内容" :visible.sync="dialogTableVisible">
			<div style="color: #409EFF;">共{{textLength}}条数据</div>
			<el-table :data="tableData" height="250" border style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="content" label="答案"></el-table-column>
				<el-table-column prop="username" label="提交人"></el-table-column>
			</el-table>
		</el-dialog>

		<!--已做人员-->
		<el-dialog title="已做人员" :visible.sync="filledVisible">
			<div style="color: #409EFF;">共{{filledCount}}条数据</div>
			<el-table :data="filledData" height="250" border style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="realName" label="提交人"></el-table-column>
			</el-table>
		</el-dialog>

		<!--未做人员-->
		<el-dialog title="未做人员" :visible.sync="noFillVisible">
			<div style="color: #409EFF;">共{{noFillCount}}条数据</div>
			<el-table :data="noFillData" height="250" border style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="realName" label="提交人"></el-table-column>
			</el-table>
		</el-dialog>

		<!--填空题的详细信息弹窗-->
		<el-dialog title="详细内容" :visible.sync="kongVisible">
			<div style="color: #409EFF;">共{{textLength}}条数据</div>
			<!--          动态增加表头-->
			<!--					<div >-->
			<!--					<el-table  height="250" border style="width: 100%">-->
			<!--            <div v-for="item in this.tableData">-->
			<!--              <el-table-column :label="item.username">-->
			<!--              </el-table-column>-->
			<!--              <template v-for='item2 in item.content'>-->
			<!--                <el-table-column-->
			<!--                    :show-overflow-tooltip="true"-->
			<!--                    :label="item2">-->
			<!--                </el-table-column>-->
			<!--              </template>-->

			<!--            </div>-->
			<!--					</el-table>-->
			<!--					</div>-->
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="content" label="问题">
				</el-table-column>
				<el-table-column prop="username" label="提交人" width="200">
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>

</template>
<script>
	import * as echarts from 'echarts';
	import 'echarts-wordcloud';
	import axios from "axios";

	export default {
		data() {
			return {
				loading: true,
				kongNum: 0,
				kongIndex: ["0", "1"],
				filledVisible: false,
				noFillVisible: false,
				filledCount: 0,
				noFillCount: 0,
				dialogTableVisible: false,
				kongVisible: false,
				rankingVisible: false,
				selectVisible: false,
				visible: [],
				listdata: [],
				ranking: [],
				filledData: [],
				noFillData: [],
				detail: [{
					"choiceList": [{
							"content": "yes",
							"count": 10,
							"id": 0,
							"percent": "45%",
							"rightAnswer": null
						},
						{
							"content": "no",
							"count": 20,
							"id": 0,
							"percent": "45%",
							"rightAnswer": null
						}
					],
					"content": "1+1等于2？",
					"questionId": 454445,
					"questionType": "judge",
					"score": 6
				}],
				tableData: [{
						content: "dfgsdg"
					},
					{
						content: "ddsdfsfgsdg"
					}
				],
				cloudData: [

					{
						name: "特色社会主义思想",
						value: 700
					},
				],
				textLength: 5,
				form_id: 0,
				peopleNum: 0,
			};
		},
		mounted() {
			this.form_id = this.$route.query.id;
			//alert("id是："+this.form_id);
			//alert(this.APIurl.countFilledPeople)
			//this.form_id = 23;
			this.getCountPeople(this.form_id);
			this.viewRanking(this.form_id);
			this.getCountResult(this.form_id);
		},
		methods: {
			peopleFilled() {
				this.filledData = [];
				this.filledVisible = true;
				const _this = this;
				axios
					.get(_this.APIurl.apiUrl.domainName + "examPaperAnswer/filledPeople/" + _this.form_id)
					.then(function(resp) {
						for (let i = 0; i < resp.data.data.length; i++) {
							let item = {};
							item.realName = resp.data.data[i];
							_this.filledData.push(item);
						}

						_this.filledCount = resp.data.data.length;
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			peopleNofill() {
				this.noFillData = [];
				this.noFillVisible = true;
				const _this = this;
				axios
					.get(_this.APIurl.apiUrl.domainName + "examPaper/NoFillPeople/" + _this.form_id)
					.then(function(resp) {
						for (let i = 0; i < resp.data.data.length; i++) {
							let item = {};
							item.realName = resp.data.data[i];
							_this.noFillData.push(item);
						}

						_this.noFillCount = resp.data.data.length;
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			see(id) {
				this.$router.push({
					path: "/answerPreview",
					query: {
						id: id,
						teacherSee: "teacher",
					}
				})
			},
			watch(questionId, id, questiontype, content) {
				const _this = this;
				_this.selectVisible = true;
				if (questiontype == 'radio') {
					axios
						.get(_this.APIurl.apiUrl.domainName + "dataAnalysis/getNameDan/" + questionId + '/' + id)
						.then(function(resp) {
							_this.listdata = resp.data.data;
						})
						.catch(function(error) {
							console.log(error);
						});
				}
				if (questiontype == 'judge') {
					axios
						.get(_this.APIurl.apiUrl.domainName + "dataAnalysis/getNameDan/" + questionId + '/' + content)
						.then(function(resp) {
							_this.listdata = resp.data.data;
						})
						.catch(function(error) {
							console.log(error);
						});
				}
				if (questiontype == 'checkbox') {
					axios
						.get(_this.APIurl.apiUrl.domainName + "dataAnalysis/getNameDuo/" + questionId + '/' + id)
						.then(function(resp) {
							_this.listdata = resp.data.data;
						})
						.catch(function(error) {
							console.log(error);
						});
				}

			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.rightAnswer) {
					return 'success-row';
				}
				return '';
			},

			//统计答案，将统计好的问题答案数组发送到前端
			getCountResult(form_id) {

				const _this = this;
				axios
					.get(_this.APIurl.apiUrl.domainName + "dataAnalysis/countQuestionResult/" + form_id)
					.then(function(resp) {
						_this.detail = resp.data.data;
						_this.loading = false;
					})
					.catch(function(error) {
						console.log(error);
					});

			},
			//查看排名
			viewRanking(form_id) {
				const _this = this;
				axios
					.get(_this.APIurl.apiUrl.domainName + "dataAnalysis/viewRanking/" + form_id)
					.then(function(resp) {
						_this.ranking = resp.data.data;
					})
					.catch(function(error) {
						console.log(error);
					});
			},

			Ranking() {
				this.rankingVisible = true;

			},

			//统计填写该问卷的人数
			getCountPeople(form_id) {
				const _this = this;
				axios
					.get(_this.APIurl.apiUrl.domainName + "dataAnalysis/countFilledPeople/" + form_id)
					.then(function(resp) {
						_this.peopleNum = resp.data.data;
					})
					.catch(function(error) {
						console.log(error);
					});

			},

			//查看文本回答详情
			lookTextDetail(questionId, questionType, rowNum) {
				this.kongIndex = [];
				this.kongNum = rowNum;
				//因为element-ui的prop要求用String类型，所以把数字转为字符串再进行遍历
				for (let i = 0; i < rowNum; i++) {
					this.kongIndex.push(i + "");
				}

				console.log(this.kongIndex);
				console.log(questionId);
				this.tableData = [];
				this.textLength = 0;
				if (questionType == 'texts') {
					this.dialogTableVisible = true;
				} else {
					this.kongVisible = true;
				}



				const _this = this;
				axios
					.get(_this.APIurl.apiUrl.domainName + "dataAnalysis/countText/" + questionId)
					.then(function(resp) {

						_this.textLength = resp.data.data.length;
						if (questionType == 'texts') {
							// _this.tableData = resp.data.data;
							// console.log(_this.tableData);
							for (let i = 0; i < resp.data.data.length; i++) {
								let item = {};
								item.content = resp.data.data[i].content;
								item.username = resp.data.data[i].username;
								//item.username = resp.data.data
								_this.tableData.push(item);
							}
						} else {

							for (let i = 0; i < resp.data.data.length; i++) {
								let item = {};
								let arr = [];
								arr = resp.data.data[i].content.split("_");
								for (let k = 0; k < arr.length; k++) {
									arr[k] = arr[k] + ' ';
								}
								item.content = arr;
								// console.log(arr);
								item.username = resp.data.data[i].username;
								_this.tableData.push(item);
								//_this.tableData.push(arr);
							}
							console.log(_this.tableData);
						}


					})
					.catch(function(error) {
						console.log(error);
					});

			},

			//切换图表
			//changeValue(index, 1)
			//设置对应下标index的行，要展示的图标类型
			//判断点击了哪个图标按钮
			changeValue(index, value, questionId) {
				//如果点击词云图，那么就把其他的词云图隐藏（因为所有词云图共用一个cloudData,多个词云图一起显示会出现一样的结果）
				if (value == 3) {
					for (let i = 0; i < this.visible.length; i++) {
						if (i != index && (this.detail[i].questionType == 'text' || this.detail[i].questionType ==
							'texts')) {
							this.visible[i] = 0;
						}
					}
				}
				//向visible中添加数据
				this.$set(this.visible, index, value);

				if (value == 1) {
					this.setPar(index);
				} else if (value == 2) {
					// this.setA(index);
					this.setGraph(index);
				} else if (value == 3) {
					this.lookWorldCloud(index, questionId);
					//this.setWordCloud(index);
				}
			},



			// 饼状图
			//根据下标index设置对应行的饼状图
			setPar(index) {

				let myChart = echarts.init(document.getElementById("bing" + index));
				var option = {
					tooltip: {},
					color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE',
						'#E690D1',
						'#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
					],
					legend: {
						data: ["数量"]
					},
					dataset: {
						dimensions: ["content", "count", "percent"],
						source: this.detail[index].choiceList
					},
					series: [{
						name: "统计结果：",
						type: "pie",
						radius: "55%",
						center: ["50%", "50%"],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)"
							}
						}
					}]
				};
				myChart.setOption(option);
			},


			//柱状图
			//根据下标index设置对应行的柱状图
			setGraph(index) {

				let myChart = echarts.init(document.getElementById("graph" + index));
				var option = {
					tooltip: {},
					legend: {
						data: ["数量"]
					},
					dataset: {
						dimensions: ["content", "count", "percent"],
						source: this.detail[index].choiceList
					},
					xAxis: {
						type: "category",
						axisLabel: {
							interval: 0,
							rotate: 30
						}
					},
					yAxis: {},
					series: [{
						name: "数量：",
						type: "bar",
						barWidth: 30,
						color: "deepskyblue"
					}]
				};
				myChart.setOption(option);
			},

			setWordCloud(index) {
				let myCloud = echarts.init(document.getElementById("mywordcloud" + index));
				var option = {
					/* title: {
					  text: "热爱祖国",
					  x: "center"
					}, */
					backgroundColor: "#fff",
					// tooltip: {
					//   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
					// },
					series: [{
						type: 'wordCloud',

						// The shape of the "cloud" to draw. Can be any polar equation represented as a
						// callback function, or a keyword present. Available presents are circle (default),
						// cardioid (apple or heart shape curve, the most known polar equation), diamond (
						// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

						shape: 'circle',

						// A silhouette image which the white area will be excluded from drawing texts.
						// The shape option will continue to apply as the shape of the cloud to grow.

						//maskImage: maskImage,

						// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
						// Default to be put in the center and has 75% x 80% size.

						left: 'center',
						top: 'center',
						width: '70%',
						height: '80%',
						right: null,
						bottom: null,

						// Text size range which the value in data will be mapped to.
						// Default to have minimum 12px and maximum 60px size.

						sizeRange: [12, 60],

						// Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

						rotationRange: [-90, 90],
						rotationStep: 45,

						// size of the grid in pixels for marking the availability of the canvas
						// the larger the grid size, the bigger the gap between words.

						gridSize: 8,

						// set to true to allow word being draw partly outside of the canvas.
						// Allow word bigger than the size of the canvas to be drawn
						drawOutOfBound: false,

						// If perform layout animation.
						// NOTE disable it will lead to UI blocking when there is lots of words.
						layoutAnimation: true,

						// Global text style
						textStyle: {
							fontFamily: 'sans-serif',
							fontWeight: 'bold',
							// Color can be a callback function or a color string
							color: function() {
								// Random color
								return 'rgb(' + [
									Math.round(Math.random() * 255),
									Math.round(Math.random() * 255),
									Math.round(Math.random() * 255)
								].join(',') + ')';
							}
						},
						emphasis: {
							focus: 'self',

							textStyle: {
								shadowBlur: 10,
								shadowColor: '#333'
							}
						},

						// Data is an array. Each array item must have name and value property.
						data: this.cloudData
					}]
				};
				myCloud.setOption(option);

			},
			lookWorldCloud(index, questionId) {
				this.cloudData = [];
				const _this = this;
				axios
					.get(_this.APIurl.apiUrl.domainName + "dataAnalysis/getWordCloud/" + questionId)
					.then(function(resp) {
						_this.cloudData = resp.data.data;
						_this.setWordCloud(index);
					})
					.catch(function(error) {
						console.log(error);
					});

			}
		}
	};
</script>
<style>
	.Count {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.Count .question {
		max-width: 800px;
		width: 80%;
		display: inline-block;
		margin: 5px;
		text-align: left;
	}

	.Count .table {}

	.Count .graph {
		width: 500px;
		height: 300px;
	}

	.Count .bing {
		width: 500px;
		height: 300px;
	}

	.Count .mywordcloud {
		text-align: center;
		width: 500px;
		height: 300px;
	}


	.opera-buttons {
		padding: 10px;
	}

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
